<template>
	<view class=""> 
		<view class="bigBoxSty ml-24 mr-24 mt-16" v-for="item in supplierList">
			<view @click="goDetail(item, current)">
				<view :class="{ flexSty: current == 0 || current == 1 || current == 2 || current == 3 || current == 4 }">
					<view class="flex-start pt-35 ml-24" style="align-items: center;">
						<image :src="getImageUrl(item.u_avatar)" mode="aspectFill" class="w-55 h-55" style="border-radius: 50%;"></image>
						<flag class="w-30 h-20 mr-4 ml-15" :country="item.country" />
						<span class="ml-12" style="max-width: 550rpx;">{{ item[plang('u_name')] }}</span>
						<view  v-if="current != 0"  class="add_flag  ml-12">
							{{ $t('专业代办') }}
						</view>
						<!-- <image v-if="current != 0" src="../../../../../static/icon/professIcon (2).png" mode="aspectFill" class="w-110 h-30 ml-12"></image> -->
					</view>
					<span v-if="current == 0" class="text-888 fz20 mr-24 mt-25">{{$t('待创建')}}</span>
					<span v-if="current == 1" class="text-888 fz20 mr-24 mt-25">{{$t('待付款')}}</span>
					<span v-if="current == 2" class="fz20 mr-24 mt-25" style="color: #03C24F;">{{$t('进行中')}}</span>
					<span v-if="current == 3 && !item.repair_state" class="fz20 mr-24 mt-25" style="color: #03C24F;">{{$t('已完成')}}</span>
					<span v-if="current == 3 && (item.repair_state == 3 || item.repair_state == 2)" class="fz20 mr-24 mt-25" style="color: #03C24F;">{{$t('售后完成')}}</span>
					<span v-if="current == 4 && item.repair_state == 1" class="fz20 mr-24 mt-25" style="color: #03C24F;">{{$t('售后中')}}</span>
				</view>
				<view v-if="current == 0" class="contentSty">
					<p class="text-010 fz24 font-bold ml-18">{{$t('申请服务种类')}}: {{ item[plang('service')] }}</p>
				</view>
				<view v-else class="contentSty">
					<p class="text-010 fz24 font-bold ml-18">{{$t('服务内容')}}: {{ item[plang('service')] }}</p>
					<p class="mr-18"> <span class="text-888 fz20">{{$t('积分')}}</span> <span class="text-010 fz26 font-bold ml-10">{{ item.amount }}</span> </p>
				</view>
			</view>
			<view v-if="current == 0" class="flex-end mt-16"> 
				<button :disabled="btnDis" class="afterSty" @click="createOrder(item)">
					{{$t('创建订单')}}
				</button>
				<view class="afterSty mr-24 ml-24" @click="callPhone(item)" style="position: relative;">
					{{$t('发起电话')}}
					<image
						src="/static/translatexx.png"
						class="translatexxxxxx"
						mode="widthFix"
					/>
				</view>
			</view>
			<view v-else-if="current == 1" class="between mt-16">
				<p class="fz22 text-888 ml-24">{{$t('订单编号')}}: {{ item.on }}</p>
				<view class="afterSty mr-24" @click="callPhone(item)">
					{{$t('打电话')}}
					<image
						src="/static/translatexx.png"
						class="translatexxxxxx"
						mode="widthFix"
					/>
				</view>
			</view>
			<view v-else-if="current == 2" class="mt-16">
				<view v-if="item.complete == 0" class="flex-end mr-24" @click="confirmValue(item)">
					<view class="goPaySty">
						{{$t('确认完成')}}
					</view>
				</view>
				<view v-else-if="item.complete == 1" class="flex-end mr-24">
					<!-- <view class="goPaySty">
						确认完成
					</view> -->
					<p class="fz24" style="color: #007AFF">{{$t('请等待用户付款')}}</p>
				</view>
			</view>
			<view v-else-if="current == 3" class="">
				<view class="ml-24 mr-24" style="border-bottom: 1rpx solid #f0f0f0;">
					<view class="between mt-35">
						<p class="fz24 text-888">{{$t('订单时间')}}</p>
						<p class="fz24 text-010">{{item.create_time}}</p>
					</view>
					<view v-if="item.evaluate" class="between mt-25">
						<p class="fz24 text-888">{{$t('用户评价')}}</p>
						<view class="flex-start ml-34 mt-15">
							<view class="" v-for="(it, ind) in scoreList">
								<image v-if="it.num <= item.score" class="ml-8 w-25 h-25"
									src="/static/img/starBright.png"></image>
								<image v-else class="ml-8 w-25 h-25" src="/static/img/starDark.png"></image>
							</view>
						</view>
					</view>
					<view class="between mt-25">
						<p class="fz24 text-888">{{$t('收益比例')}}</p>
						<p v-if="current == 3 && !item.repair_state" class="fz24 text-010">100%</p>
						<p v-else class="fz24 text-010">{{item.compensation}}%</p>
					</view>
					<view class="between mt-25">
						<p class="fz24 text-888">{{$t('收益积分')}}</p>
						<p v-if="current == 3 && !item.repair_state" class="fz24 text-010">{{item.amount}}</p>
						<p v-else class="fz24 text-010">{{(item.amount * item.compensation) / 100}}</p>
					</view>
					<view class="between mt-25 mb-30">
						<p class="fz24 text-888">{{$t('订单编号')}}</p>
						<p class="fz24 text-010">{{ item.on }}</p>
					</view>
				</view>
			</view>
			<view v-else-if="current == 4" class="">
				<view class="ml-24 mr-24 pb-5">
					<view class="between mt-35">
						<p class="fz24 text-888">{{$t('订单时间')}}</p>
						<p class="fz24 text-010">{{item.create_time}}</p>
					</view>
					<view v-if="item.evaluate" class="between mt-25">
						<p class="fz24 text-888">{{$t('用户评价')}}</p>
						<view class="flex-start ml-34">
							<view class="" v-for="(it, ind) in scoreList">
								<image v-if="it.num <= item.score" class="ml-8 w-25 h-25"
									src="/static/img/starBright.png"></image>
								<image v-else class="ml-8 w-25 h-25" src="/static/img/starDark.png"></image>
							</view>
						</view>
					</view>
					<view class="between mt-25">
						<p class="fz24 text-888">{{$t('收益比例')}}</p>
						<p class="fz24 text-010">{{item.compensation}}</p>
					</view>
					<view class="between mt-25">
						<p class="fz24 text-888">{{$t('收益积分')}}</p>
						<p class="fz24 text-010">{{item.amount}}</p>
					</view>
					<view class="between mt-25 mb-30">
						<p class="fz24 text-888">{{$t('订单编号')}}</p>
						<p class="fz24 text-010">{{ item.on }}</p>
					</view>
				</view>
			</view>
			
		</view>
			<u-modal :confirm-text="$t('确定')"  :cancel-text ="$t('取消')" class="modalSty" v-model="confirmModal" :content="$t('是否确认完成') + '?'" :showCancelButton="true" @cancel="orderModal = false" @confirm="gotoSuccess" :title="$t('提示')"></u-modal>
	</view>
</template>

<script>
import { settlement, request_minute } from '@/api/basic.js'
	export default {
		props: ["current", "supplierList"],
		data() {
			return {
				confirmModal: false,
				btnDis: false,
				orderOn: '',
				scoreList: [{
					num: 1
				},
				{
					num: 2
				},
				{
					num: 3
				},
				{
					num: 4
				},
				{
					num: 5
				},
				],
			}
		},
		methods: {
			confirmValue(item) {
				this.confirmModal = true
				this.orderOn = item.on
			},
			toAfter(item) {
				uni.navigateTo({
					url: `/pages/tabbar/newUser/serviceOrder/jobAfterApply?orderNo=${item.on}`
				})
			},
			saleInfo(item) {
				uni.navigateTo({
					url: `/pages/tabbar/newUser/serviceOrder/afterDetailInfo?orderNo=${item.on}`
				})
			},
			callPhone(item) {
				console.log('999999', uni.getStorageSync("user_id"), item.user_id)
				if(uni.getStorageSync("user_id") == item.user_id) {
					uni.showToast({
						title: this.$t('不能给自己打电话'),
						icon: "none",
					});
				} else {
					request_minute({
						user_id: uni.getStorageSync("user_id"),
						target_id: item.user_id,
					}).then(res => {
						if (res.data.data.flag == 1) {
							this.isMessageGo({
								action: 'call',
								data: {
									userId: item.user_id,
									type: res.data.data.type || 1,
								}
							})
						} else {
							uni.showToast({
								title: this.$t('积分不足，请充值积分'),
								icon: "none",
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/vip/scorePoint',
									webview: 'zWebView'
								})
							}, 500)
						}
					})
				}
			},
			createOrder(item) {
				this.btnDis = true
				uni.setStorageSync('createOrder',item)
				uni.navigateTo({
					// url: `/pages/tabbar/newUser/serviceOrder/createOrder?itemInfo=${JSON.stringify(item)}`
					url: `/pages/tabbar/newUser/serviceOrder/createOrder`
				})
				setTimeout(() => {
					this.btnDis = false
				}, 2000)
			},
			gotoSuccess() {
				settlement({on: this.orderOn , user_id: uni.getStorageSync("user_id"), type: 1}).then(res => {
					if(res.data.code == 200) {
						this.$emit('getListOrder')
						// uni.$u.toast('请等待{{$t('用户')}}付款')
						// uni.redirectTo({
						// 	url: '/pages/tabbar/newUser/serviceOrder/index?order=0&statusJob=3'
						// })
					} else {
						// uni.$u.toast(res.data.message)
						uni.$u.toast(res.data[this.plang('message')])
					}
					console.log(res)
				})
			},
			goDetail(item, current) {
				if (current != 0) {
					uni.navigateTo({
						url: `/pages/tabbar/newUser/serviceOrder/customInfo?type=1&orderNo=${item.on}`
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';
	.bigBoxSty {
		// width: 100%;
		min-height: 300rpx;
		background-color: #fff;
		border-radius: 26rpx;
		.contentSty {
			background: linear-gradient(113.85deg, #EEF6FF -2.69%, rgba(255, 255, 255, 0) 47.5%);
			height: 104rpx;
			margin-left: 24rpx;
			margin-right: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16rpx;
			border-radius: 26rpx;
		}
		.goPaySty {
			width: 228rpx;
	
			height: 52rpx;
			border-radius: 8rpx;
			background-color: #007AFF;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			line-height: 52rpx;
			letter-spacing: 0%;
			color: #fff;
			text-align: center;
			margin-left: 28rpx;
		}
		.afterSty {
			min-width: 228rpx;
			padding-left: 16rpx;
			padding-right: 16rpx;
			
			height: 52rpx;
			border-radius: 8rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			line-height: 52rpx;
			color: #0E0E0E;
			border: 1rpx solid #D8D8D8;
			text-align: center;
		}
			/deep/ uni-button {
				margin: 0 !important;
				padding: 0 !important;
				background-color: #fff !important;
				// border: 1rpx solid #D8D8D8 !important;
				border: transparent !important;
			}
		.flexSty {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.evaluteSty {
			width: 120rpx;
			height: 52rpx;
			border-radius: 8rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			line-height: 52rpx;
			color: #0E0E0E;
			border: 1rpx solid #D8D8D8;
			text-align: center;
			margin-left: 12rpx;
			margin-right: 12rpx;
		}
		.goApply {
			width: 228rpx;
			height: 52rpx;
			border-radius: 8rpx;
			border: 1rpx solid #007AFF;
			font-family: PingFang SC;
			font-size: 22rpx;
			line-height: 52rpx;
			color: #007AFF;
			text-align: center;
		}
		.modalSty {
			text-align: center;
		}
		.add_flag{
			font-size: 20rpx;
			color: #fff;
			line-height: 1;
			text-align: center;
			padding: 6rpx 10rpx;
			border-radius: 500rpx;
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			box-shadow: -4px 5px 6.5px 0px rgba(200, 251, 255, 0.46) inset, -2px -6px 9.9px 0px #71D0FF inset, 0px 4px 13.8px 0px #DEE1EF;

		}
	}
</style>
